<template>
  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 秦峻贤</p>
  <div style="width: 1154px;margin: 0 auto;position: relative; color: rgb(51, 51, 51)" >
    <el-row :gutter="25" style="margin: 0">
      <!-- left main contain     -->
      <el-col :span="15">
        <!-- PART 1 carousel contain       -->
        <el-carousel height="auto" arrow="always" trigger="click" indicator-position="none"  style="--el-carousel-arrow-background:#00cf97; --el-carousel-arrow-hover-background: rgba(0,207,151,0.53)">
          <el-carousel-item v-for="img in thisCarDetailImgArr" style="height: 430px;">
            <img :src="img" alt="" style="width: 100%; height: 100%; border-radius: 5px;"/>
          </el-carousel-item>
        </el-carousel>

        <!-- 导航栏  -->
        <div style="width: 100%;">
          <el-affix >
            <el-anchor :offset="70" direction="horizontal">
              <el-anchor-link href="#qjx-租金趋势" >
                <span class="qjx-anchor-span">租金趋势</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-可租用时间">
                <span class="qjx-anchor-span">可租用时间</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-用车限制">
                <span class="qjx-anchor-span">用车限制</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-车辆配置">
                <span class="qjx-anchor-span">车辆配置</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-优车推荐">
                <span class="qjx-anchor-span">优车推荐</span>
              </el-anchor-link>
              <el-anchor-link href="#qjx-平台优势">
                <template #default>
                  <span class="qjx-anchor-span">平台优势</span>
                </template>
              </el-anchor-link>
            </el-anchor>
          </el-affix>
        </div>



        <!-- PART 2 rent contain  -->
        <div id="qjx-租金趋势" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">租金趋势</h1>
          <!--  rent options        -->
          <div class="qjx-rent-option-box" style="width: 100%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">月租折前价</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>6230</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">月租折前价</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>4198</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">月租折前价</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>4198</strong>元/月均</span>
          </div>
          <div class="qjx-rent-option-box" style="width: 66%;">
            <span style="float: left; line-height: 40px; font-size: 12px;">月租折前价</span>
            <span style="float: right; line-height: 40px;font-size: 14px; color: #ff5c5c;"><strong>4198</strong>元/月均</span>
          </div>
        </div>
        <!--         PART 3 calendar contain       -->

        <div id = "qjx-可租用时间" class="qjx-left-component-div" style="height: 550px; position: relative">
          <div style="width: 100%; height: 450px; position: absolute; bottom: 0;left: 0; z-index: 99">

          </div>
          <h1 class="qjx-left-component-sub-title">可租用时间</h1>
          <!--  calender 1        -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-calendar  style="width: 100%;"  ref="calendar1" v-model="value">
                <template #header="{ date }">
                  <el-button size="small" @click="selectDate('prev-month'); calendar_prev_click()" :disabled="start==0">
                    ←
                  </el-button>
                  <span>{{ date }}</span>
                  <span> </span>
                </template>
                <template #date-cell="{ data }">
                  <div style="position: relative;">
                    <p v-if="data.type=='current-month'" :class="compareDates(formattedDate,data.day) ? 'pass-day' : '' "  style="margin: 0;">{{data.day.split('-')[2]}}<br>
                      <span style="font-size: 11px; color: #b7b7b7; right: 6px; position: relative;">￥140</span>
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-col>
            <!--  calender 2        -->
            <el-col :span="12">
              <el-calendar  style="width: 100%;" ref="calendar2">
                <template #header="{ date }">
                  <span> </span>
                  <span>{{ date }}</span>
                  <el-button size="small" @click="selectDate('next-month');calendar_next_click()" :disabled="end==0">
                    →
                  </el-button>
                </template>
                <template #date-cell="{ data }" >
                  <div style="position: relative;">
                    <p v-if="data.type=='current-month'" :class="compareDates(formattedDate,data.day) ? 'pass-day' : '' " style="margin: 0;">{{data.day.split('-')[2]}}<br>
                      <span style="font-size: 11px; color: #b7b7b7; right: 6px; position: relative;">￥140</span>
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-col>
          </el-row>
        </div>
        <!-- PART 4 用车限制 contain       -->
        <div id="qjx-用车限制" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">用车限制</h1>
          <el-row :gutter="10" style="text-align: left; font-size: 14px;">
            <el-col :span="12">

              <p><span style=" opacity: 0.8;">提前预定 </span><strong>2-4小时</strong></p>
              <p><span style=" opacity: 0.8;">不便交车 </span><strong>每天 23:00-次日07:00</strong></p>
            </el-col>
            <el-col :span="12">
              <p><span style=" opacity: 0.8;">月均限行 </span><strong>2-月均限9000km</strong></p>
              <p><span style=" opacity: 0.8;">燃油政策 </span><strong>建议原油位返还</strong></p>
            </el-col>
          </el-row>
        </div>
        <!-- PART 5 车辆配置 contain       -->
        <div id="qjx-车辆配置" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">车辆配置</h1>
          <!-- 燃油车配置 (包括混动)        -->
          <el-row :gutter="10" style="text-align: left; font-size: 14px;">
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">车龄 </span><strong>2-3年</strong></p>
              <p><span style=" opacity: 0.8;">油箱容量 </span><strong>60L</strong></p>
            </el-col>
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">排量 </span><strong>1.4T</strong></p>
              <p><span style=" opacity: 0.8;">座椅 </span><strong>5位</strong></p>
            </el-col>
            <el-col :span="8">
              <p v-if="powerType=='2'"><span style=" opacity: 0.8;">动力：汽油 </span><strong>92(93)号汽油</strong></p>
              <p v-if="powerType=='1'"><span  style=" opacity: 0.8;">动力：油电混动 </span><strong>95(97)号汽油</strong></p>
              <p><span style=" opacity: 0.8;">驱动方式 </span><strong>前轮驱动</strong></p>
            </el-col>
          </el-row>
          <!-- 电动车配置         -->
          <el-row :gutter="10" v-if="powerType=='3'" style="text-align: left; font-size: 14px;">
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">车龄 </span><strong>2-3年</strong></p>
              <p><span style=" opacity: 0.8;">座椅 </span><strong>5位</strong></p>
            </el-col>
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">动力：电动 </span><strong>纯电</strong></p>
              <p><span style=" opacity: 0.8;">驱动方式 </span><strong>四轮驱动</strong></p>
            </el-col>
            <el-col :span="8">
              <p><span style=" opacity: 0.8;">续航里程 </span><strong>465km</strong></p>
            </el-col>
          </el-row>
          <!--   车辆特色     -->
          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="4">
              <el-card style="text-align: center; --el-card-padding: 0px; border: 0" shadow="never">
                <img src="https://carphoto.atzuche.com/system/home/v591/daocheyingxiang_anhei.png" style="height: 30px; width: 30px;">
                <p style="font-size: 12px; margin-top: 0;">倒车影像</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- PART 6   优车推荐     -->
        <div id="qjx-优车推荐" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title" style="margin-bottom: 40px;">优车推荐</h1>
          <el-row :gutter="10">
            <el-col :span="6" v-for="item in 4">
              <div class="recommend-car-item" style="text-align: left; position: relative;" @click="myclick()">
                <img src="https://carphoto.atzuche.com/car/18/08/430139100/1533787646061_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480" style="width: 100%; --el-card-padding: 0px;">
                <p style="font-size: 14px; opacity: 0.8; margin-bottom: 0;">本田 飞度 1.5L</p>
                <span style="position: absolute; top: 120px; right: 40px; font-size: 10px; border: 1px solid rgba(60,60,90,.3); border-radius: 4px;">自</span>
                <p style="margin: 0;">
                  <span style="font-size: 12px; opacity: 0.6;">沪A***J5</span> <span style="font-size: 12px; color: #ff5c5c"> 5.0分</span>
                </p>
                <p style="margin-top: 0;color: #ff5c5c; font-size: 12px;"><strong style="font-size: 16px;">2340</strong>元/月</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- PART 7   平台优势     -->
        <div id="qjx-平台优势" class="qjx-left-component-div">
          <h1 class="qjx-left-component-sub-title">平台优势</h1>
          <p style="margin-top: 0;font-size: 14px; opacity: 0.6; text-align: left;">凹凸出行，万款车型共享平台。APP一键下单、车管家送车上门、高额保障用车无忧。自2014年上线，凹凸出行已累计：</p>
          <el-row :gutter="10">
            <el-col :span="6" v-for="item in 4" style="text-align: left">
              <img style="height: 30px;width: 30px; margin: 15px 0" src="">
              <p style="margin: 0; font-size: 20px; font-weight: 700">10000+</p>
              <p style="margin: 0; font-size: 14px; opacity: 0.7;">精选共享车型</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- part 8 right main contain     -->
      <el-col :span="9">
        <div style="width: 100%">
          <a href="#"><img src="https://www.atzuche.com/static/media/bg4.f9fdb60e.jpg" style="margin-bottom:10px; background-repeat: no-repeat; width: 100%;"></a>
          <a href="#"><img src="https://www.atzuche.com/static/media/bg5.e2563263.jpg" style="margin-bottom:10px; background-repeat: no-repeat; width: 100%;"></a>
          <div style="font-size: 12px; box-sizing:border-box; text-align: left; border: 1px solid rgb(236, 236, 239); padding: 20px; width: 100%; position: relative; border-radius: 5px;">
            <p style="color: #ff5c5c;"><strong style="font-size: 24px;">￥5850 </strong>/月均</p>
            <strong style=" font-size: 20px">蔚来 EC6 电动车</strong>
            <span style="position: absolute; top: 78px; right: 175px; font-size: 10px; border: 1px solid rgba(60,60,90,.3);padding: 2px; border-radius: 4px;">自</span>


            <el-button style="margin: 20px 0 0 0; width: 100%; font-size: 15px; height: 50px;">查看可用租时间</el-button>
            <el-button color="#14d78a" style=" margin: 15px 0 20px 0; width: 100%; font-size: 15px; color: #ffffff; height: 50px;">扫码下单吧↓</el-button>

            <el-row :gutter="10" style="width: 100%; text-align: center;">
              <el-col :span="6">
                <div style="padding-top: 20px">
                  <img style="width: 30px" src="https://auto-static-pro.oss-cn-hangzhou.aliyuncs.com/miniprogram/cardetail-zfb-icon.png">
                  <p>
                    <span>支付宝扫码</span><br>
                    <span style="display: block; margin-top:5px; font-size: 12px; opacity: 0.6">
                      信用免押<br>
                      先租后付
                    </span>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 10px; border: 1px solid rgba(60,60,90,.1);">
                  <img src="https://www.atzuche.com/apigateway/carInfoMgmt/public/qrCodePic/getQrCodePic?size=120&url=https%3A%2F%2Fm.atzuche.com%2Fm%2Findex%2Fredirectmini">

                </div>
              </el-col>
              <el-col :span="6">
                <div style="padding-top: 20px">
                  <img style="width: 30px" src="https://auto-static-pro.oss-cn-hangzhou.aliyuncs.com/miniprogram/cardetail-weixin-icon.png">
                  <p>
                    <span>微信宝扫码</span><br>
                    <span style="display: block; margin-top:5px; font-size: 12px; opacity: 0.6">
                      神秘礼包<br>
                      微信专享
                    </span>
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- part 9 同价位车型推荐   -->
    <div style="margin-bottom: 40px;">
      <h1 class="qjx-left-component-sub-title">同价位车型推荐</h1>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in 4">
          <a href="#" >
            <img class="qjx_image" style="transition: all 0.2s ease-in-out; width: 100%; border-radius: 5px;" src="https://carphoto.atzuche.com/car/22/12/38473345/1670316060671_1.jpg?x-oss-process=image/resize,m_lfit,h_315,w_480">
          </a>
          <p style="text-align: left; font-size: 12px;">
            <a href="#" class="qjx-recommend-car-link" style="text-decoration: none; color: #333;"><strong style="font-size: 15px">蔚来 EC6 电动车 自动挡</strong></a><br>
            <span >沪A****61 <span style="color: #ff5c5c">4.0分</span></span><br>
            <span style=" display: block; margin-top: 15px; color: #ff5c5c"><strong style="font-size: 18px;">5970元</strong>/月均</span>

          </p>
        </el-col>
      </el-row>
    </div>

  </div>

</template>


<script setup>
import {ref,onMounted,computed} from "vue";

import {ElMessage, TabsPaneContext} from "element-plus";
import router from "@/router";
import {List} from "@element-plus/icons-vue";


const calendar1 = ref()
const calendar2 = ref()
const today=new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, '0');
const day = today.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
const value=ref(formattedDate);

onMounted(()=>{
  calendar2.value.selectDate('next-month')

  console.log(value.value);

})

//<p v-if="data.type=='current-month'" :class="compareDates(formattedDate,data.day) ? 'futureDay' : '' "  style="margin: 0;">{{data.day.split('-')[2]}}<br>

const compareDates=(date1, date2)=> {
  var d1 = new Date(date1);
  var d2 = new Date(date2);

  if (d1 > d2) {
    return true;
  } else if (d1 <= d2) {
    return false;
  }
}



const selectDate = (val) => {
  if (!calendar1.value) return
  calendar1.value.selectDate(val)

  if (!calendar2.value) return
  calendar2.value.selectDate(val)
  console.log(value.value)
  console.log("format"+formattedDate);
}


const powerType=ref('1');
const thisCarDetailImgArr = ref([

  "https://carphoto.atzuche.com/car/23/03/72087595/1701156137510_3.jpg",
  "https://carphoto.atzuche.com/car/23/03/72087595/1701156117604_1.jpg",
  "https://carphoto.atzuche.com/car/23/03/72087595/1701156128928_2.jpg",
  "https://carphoto.atzuche.com/car/23/03/72087595/1701156148257_4.jpg",
  "https://carphoto.atzuche.com/car/23/03/72087595/1701156157942_5.jpg",
  "https://carphoto.atzuche.com/car/23/03/72087595/1701156167198_6.jpg"



]);
const myclick=()=>{
  ElMessage.success('点击了');
}
const start =ref(0);
const end =ref(6);

const calendar_prev_click = () => {
  start.value = start.value-1 >= 0 ? start.value-1 : 0
  end.value = end.value+1 <= 6 ? end.value + 1 : 6
  console.log(start.value+"  " +end.value);
}
const calendar_next_click = () => {
  start.value = start.value+1 <= 6 ? start.value + 1 : 6
  end.value = end.value-1 >= 0 ? end.value-1 : 0
  console.log(start.value+"  " +end.value);



}
</script>





<style scoped>
.qjx-anchor-span{
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
  display: block;
  line-height: 50px;
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


.qjx-rent-option-box{
  height: 40px;
  border: 1px solid #ffeab8;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fffbf3;
  padding: 0 10px;
  margin-bottom:10px
}
.qjx-left-component-div{
  border-bottom: 1px solid rgba(60,60,90,.1);
  margin-bottom: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: auto;

}
.qjx-left-component-sub-title{
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  margin-bottom: 20px;

}


.qjx_image:hover{
  transform: scale(1.02);
}
</style>
<style>
.qjx-left-component-div .el-calendar .el-calendar__body .el-calendar-table .el-calendar-day{
  height: 60px;
  width: 100%;
  text-align: center;
}
.recommend-car-item:hover{
  cursor: pointer;
}

.pass-day{
  opacity: .3;
}


.sticky{
  position: fixed;
  left: 0;
  top: 80px;
  z-index: 99;
  width: 100%;
  background-color: #ff5c5c;
  height: 100px;

}
.el-calendar-table td.is-selected {
  background-color: #FFFFFF;
}

</style>